<template>
  <el-col class="cascader">
    <van-cell
      :title="node.answer ? node.answer.join('/') : '请选择'"
      value=""
      is-link
      @click="show = true"
    >
    </van-cell>
    <van-popup
      v-model="show"
      :closeable="false"
      @close="close"
      position="bottom"
    >
      <van-cascader
        active-color="#1989fa"
        v-model="answer2"
        title="请选择所在地区"
        :options="$store.state.utils.allArea"
        @close="show = false"
        @finish="onFinish"
        :field-names="fieldNames"
      />
    </van-popup>
  </el-col>
</template>

<script>
export default {
  props: ["node"],
  data() {
    return {
      show: false,
      answer: "", //显示
      answer2: "", //级联数组
      fieldNames: {
        value: "name",
        text: "name",
        children: "districts",
      },
    };
  },

  created() {},

  methods: {
    close(e) {
      this.show = false;
    },
    onFinish(e) {
      this.close();
      this.node.answer = e.selectedOptions.map((i) => i.name);
      this.answer = e.selectedOptions.map((i) => i.name).join("/");
      this.answer2 = e.value;
    },
  },
};
</script>

<style scoped>
.van-cell {
  padding: 10px;
  padding-left: 0;
  padding-right: 0;
}
.van-cell::after {
  border: none;
}
.cascader >>> .van-cell__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
